<!--
* description: 运输方式选择
* author:xuliwen
* createdDate:2021-2-3
-->
<template>
  <el-dialog
    v-dialogDrag
    :visible="popupsVisible"
    width="70%"
    :append-to-body="true"
    :close-on-click-modal="false"
    @close="closeEdit"
  >
    <dialogHeader
      slot="title"
      :title="titleName"
      :style-type="$store.state.app.dialogType"
    />
    <!-- 显示按钮的onetabel -->
    <one-table-template
      ref="multipleTable"
      :refresh-table-key="refreshTableKey"
      :dynamic-buttons="tableButtons"
      :dynamicIs-showSelect="true"
      :dynamic-api-config="apiConfig"
      :dynamic-table-cols="tableCols"
      :dynamic-form-fields="formField"
      :dynamic-is-show-more-btn="false"
      :callback-obj="callbackObj"
    />
  </el-dialog>
</template>

<script>
import { oneTableWithViewTemplateMixins } from "@/components/mixins/oneTableWithViewTemplateMixins";
import dialogHeader from "@/components/dialogHeader";
import OneTableTemplate from "@/components/templates/oneTable";
import api from "@/api/se/apiBaseData";
import { orgApis } from "@/api/paSparePartsManagement";
export default {
  components: {
    dialogHeader,
    OneTableTemplate,
  },
  props: {
    popupsVisible: {
      type: Boolean,
      default: false,
    },
    dataForForm: {
      type: Object,
      default: () => {},
    },
  },
  // 组件混入对象
  mixins: [oneTableWithViewTemplateMixins],
  data() {
    // 页面标识（与上面beforeRouteEnter中的对应）
    const viewPageCode = this.$route.path;
    // 绑定事件配置化事件
    this.$ConfigCache.CacheConfig.bindEvent(this, [viewPageCode]);
    return {
      refreshTableKey: "0",
      selectiondata: [],
      editPopupsVisible: false,
      titleName: "运输方式选择",
      // 网格查询API配置对象
      apiConfig: orgApis.findTransportWay,
      // 动态组件-按钮
      tableButtons: [
        // {
        //   compKey: "btnKey1",
        //   type: "primary",
        //   size: "small",
        //   name: "search",
        //   clickEvent: () => this.queryTable(1),
        //   text: this.$t("sys.button.query") /* 查询*/,
        //   position: "right",
        // },
        {
          compKey: "btnKey2",
          type: "",
          size: "small",
          icon: "iconfont  icon-cancel",
          clickEvent: () => this.chooseHuman(),
          text: "选择", // 取消
        },
        // {
        //   compKey: "btnKey2",
        //   type: "",
        //   size: "small",
        //   name: "reset",
        //   clickEvent: () => this.reset(),
        //   text: this.$t("sys.button.reset"),
        //   position: "right", // 重置
        // },
      ],
      // 动态组件-查询条件
      // tableComponents:
      //   this.$ConfigCache.CacheConfig.cacheData[viewPageCode] &&
      //   this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
      //     .length > 0
      //     ? this.$ConfigCache.CacheConfig.cacheData[viewPageCode].formComponents
      //     : [
      //         {
      //           compKey: "compKey1",
      //           labelName: "运输方式编码：",
      //           codeField: "deptName",
      //           component: () => import("@/components/org/commonInput"),
      //           type: "inputText",
      //           span: 12,
      //           isMust: true,
      //         },
      //         {
      //           compKey: "compKey2",
      //           labelName: "运输方式名称：",
      //           codeField: "empName",
      //           component: () => import("@/components/org/commonInput"),
      //           type: "inputText",
      //           span: 12,
      //           isMust: true,
      //         },
      //       ],
      // 动态生成网格列
      tableCols:
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path] &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols &&
        this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          .length > 0
          ? this.$ConfigCache.CacheConfig.cacheData[this.$route.path].tableCols
          : [
              {
                prop: "transportModeId",
                label: "运输ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "ordertypeTransportId",
                label: "运输订单关系ID",
                hidden: true,
                alwaysHidden: true,
              },
              {
                prop: "transportModeCode",
                label: "运输方式编码",
              },
              {
                prop: "transportModeName",
                label: "运输方式名称",
              },
              {
                prop: "isLimitCn",
                label: "是否运输限制",
              },
            ],
      callbackObj: {
        onCheckSelectChange: (selection) => {
          this.selectiondata = selection;
        },
        // 查询成功后回调
        // onQueryReturn: (response) => {
        //   this.onQueryReturn(response)
        // }
        onSelectable: (row) => {
          return row['isEnable'] === '1'
        }
      },
      formField: {
        transportModeCode: "",
        transportModeName: "",
        orderTypeId: "",
      },
    };
  },
  mounted() {
    this.formField.orderTypeId = this.dataForForm.orderTypeId;
    this.$nextTick(() => {
      this.queryTable(1);
    });
  },
  methods: {
    // onQueryReturn(response){
    //   let that=this
    //    if (response.rows.length > 0) {
    //     response.rows.forEach((element) => {
    //       if (element.orderTypeId) {
    //         // that.$nextTick( ()=> {
    //         //     that.$refs.multipleTable.$refs.multipleTable.clearSelection()
    //         //  debugger
    //         // that.$refs.multipleTable.$refs.multipleTable.toggleRowSelection(element, true)
    //         // that.refreshTableKey += 1
    //         // that.selectiondata.push(element);
    //         // })
    //       }
    //     });
    //   }
    // },
    // 选择保存
    chooseHuman() {
      if (this.selectiondata.length > 0) {
        this.selectiondata.forEach((element) => {
          element.orderTypeId = this.dataForForm.orderTypeId;
        });
        const that = this;
        const queryObj = {
          // 保存mutation
          type: "mutation",
          // api配置
          apiConfig: orgApis.chooseTransportWay,
          // 条件/实体参数（变量），根据typeParam中的定义配置
          variables: that.selectiondata,
        };
        // 转换了中台请求格式数据
        var paramD = this.$getParams(queryObj);
        // 调用中台API方法（可复用）
        this.$requestAPI(paramD).then((response) => {
          if (response.result === "1") {
            this.$message({
              message: this.$t("sys.tips.esTip5") /* 保存成功*/,
              type: "success",
              duration: 1000,
            });
            this.popupsVisible = false;
            this.$nextTick(() => {
              this.$parent.queryTable(1);
            });
          } else {
            // 保存失败
            this.$message({
              message: "保存失败:" + response.msg,
              type: "warn",
              uration: 1000,
            });
          }
          this.popupsVisible = false;
        });
      } else {
        this.$message.warning("请选择运输方式");
      }
    },
    showEdit() {
      this.editPopupsVisible = true;
    },
    // 关闭弹窗
    closeEdit() {
      this.$emit("sendCodeClose");
    },
    // queryform() {
    // var queryid = { orderId: this.dataForForm.saleOrderId }
    // // 先读取参数中的传输对象
    // const returnObj = {
    // // api配置
    //   apiConfig: orgApis.orderinvoicedetailsQuery,
    // 条件/实体参数（变量），根据typeParam中的定义配置
    // variables: queryid
    // }
    // 转换了中台请求格式数据
    // var paramD = this.$getParams(returnObj, null, this.dynamicApiStyle)
    // 调用中台API方法（可复用）
    // this.$requestAPI(paramD, this.dynamicApiStyle).then(response => {
    //   if (response.result === '0') {
    //     if (response.msg) {
    //       this.$message({
    //         message: response.msg,
    //         type: 'warn',
    //         uration: 2000
    //       })
    //     }
    //     return
    //   }
    //   // 返回json
    //   if (response.result === '1') {
    //     Object.assign(this.formField, response.rows[0], response.rows[1])
    //     console.log(this.formField)
    //   }
    // }).catch(err => {
    //   console.info(err)
    // })
    // }
  },
};
</script>
<style lang='scss' scoped>
/deep/ .el-dialog {
  margin-top: 5rem !important;
}
</style>
